<template>
    <header>
      <el-dialog
        :title=" operateType"
        :visible.sync="isShow"
        >
              <common-form
              :formLabel="operateFormlabel"
              :form="operateForm"
              :inline="true"
              ref="form"
              >
               <template >
                <!-- <br> -->
                <div class="pictureupload">
                  <p style="display:inline-block;margin-left:33px;margin-right:20px;">店铺封面</p> 
                  <input type="file" v-show="false" ref="file" @change="uploadfile" accept="image/*">
                  <el-button  @click="$refs.file.click()">选择图片</el-button>     
                  <br>
                  <img   :src="val" v-for="(val,index) in File.imgSrc" :key="index" width="50px" height="50px" style="margin-left:10px;margin-top:10px;">                 
                </div>
              </template>
              </common-form>
             <div slot="footer" class="dialog-footer">
                <el-button size="medium" @click="isShow = false">取消</el-button>
                <el-button size="medium" type="primary" @click="confirm">确定</el-button>
              </div>
      </el-dialog>
        <div class="nav-top">
            <div class="nav-top-box">
                <div class="locale">
                    <p> <i class="el-icon-location"></i> 地点</p>
                </div>
                <button class="change-locale">切换地点</button>
                <div class="near-citys">
                    <div class="">
                        [
                        <a href="#">新乡</a>
                        <a href="#">新乡</a>
                        <a href="#">新乡</a>
                        ]
                    </div>
                </div>
                <div class="login">
                    <a href="">立即登录</a>
                    <a href="">注册</a>
                </div>
                <div class="nav-top-box-right">
                    <ul>
                        <li class="nav-top-box-right-li">
                          <i class="el-icon-s-home"></i>
                            <router-link to="/">首页</router-link> 
                        </li>
                        <li class="nav-top-box-right-li" >
                          <i class="el-icon-s-cooperation"></i>
                          <template v-if="permission === 'SHOPPER'">
                            <router-link to="/shoppersonal">我的店铺</router-link> 
                          </template>
                          <template v-if="permission !== 'SHOPPER'">
                            <a href="javascript:;" @click="addstore">申请店铺</a> 
                          </template>
                        </li>
                        <li class="nav-top-box-right-li">
                          <i class="el-icon-s-custom"></i>
                            <router-link to="/personal">个人中心</router-link>
                            <!-- <div class="hidden">
                            </div> -->
                        </li>
                         <li class="nav-top-box-right-li">
                           <i class="el-icon-s-home"></i>
                            <router-link to="/admin">我的后台</router-link> 
                            <!-- <div class="hidden">
                            </div> -->
                        </li>
                        <li class="nav-top-box-right-li">
                          <i class="el-icon-back"></i>
                            <router-link to="">退出登录</router-link>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="nav-bottom">
          
            <div class="nav-bottom-box">
                <img src="../../assets/ly/img/1.jpg" width="100px">
                <input type="text" class="search-input" placeholder="请输入搜索内容">
                <button class="search-btn"> <i class="el-icon-search"></i> 搜索</button>
            </div>
        </div>
    </header>
</template>

<script>
import jwtDecode from 'jwt-decode'
import cookie from '../../cookie/index'
import CommonForm from '@/components/ly/Common/CommonForm'
export default {
    name:'HeaderNav',
    components:{CommonForm},
    data() {
      return {
         isShow:false,
        operateType:'修改信息',
        operateFormlabel:[],
        operateForm:{
        },
        permission:'',
        File:{
          imgSrc:'',
          files:''
        }
      }
    },
    methods:{
        confirm(){
         const formdata = new FormData();
          formdata.append("storeCover", this.File.files);
         this.$http({
                url:'/shops/shopper/store/addStore',
                method:'post',
                data:formdata,
                params:this.operateForm,
                maxContentLength:Infinity,
                maxRedirects:5,
                maxBodyLength:Infinity,
                headers: { 'Authorization': cookie.getToken() }
            }).then(data => {
              const list = data.data.message
              console.log(list);
              if(list === '成功'){
                  this.$message({
                        type: "success",
                        message: "修改成功!"
                    })
                    this.isShow = false
                    this.File.imgSrc=''
                    this.File.files=''
                    console.log(data);
                    this.getInfo();
              }
            }).catch(err => {
                console.log(err);
            })
      },
      uploadfile(e){
          let fs = e.target.files[0]
            this.File.files =fs
            console.log(this.File.files);
            let imgs=[]
            for(let i = 0 ;i<fs.length;i++){
                const src = window.URL.createObjectURL(fs[i])
                imgs[i]=src
            }
           this.File.imgSrc = imgs
           console.log(this.File.imgSrc);
      },
      addstore(){
        const user = jwtDecode(cookie.getToken());
        this.isShow = true
        this.operateType='申请店铺'
        this.operateFormlabel =[
           {
            model:'shopName',
            label:'商铺名称',
            type:'input',
             display:''
          },
          {
            model:'shopLocation',
            label:'商铺地址',
            type:'input',
             display:''
          },
          {
            model:'shopPhone',
            label:'联系电话',
            type:'input',
             display:''
          },
          {
            model:'shopRange',
            label:'范围',
            type:'input',
             display:''
          },
          {
            model:'shopTag',
            label:'店铺标签',
            type:'select',
            display:'',
            opts:[
              {
                label:'酒店/民宿',
                value:'酒店/民宿'
              },
               {
                label:'餐饮/美食',
                value:'餐饮/美食'
              },
               {
                label:'休闲娱乐',
                value:'休闲娱乐'
              },
               {
                label:'生活服务',
                value:'生活服务'
              },
               {
                label:'医疗健康',
                value:'医疗健康'
              },
            ]
          },

        ]
        this.operateForm={
            shopLocation:'',
            shopName:'',
            shopPhone:'',
            shopRange:'',
            shopTag:'',
            userId:user.userId
        }
      },
      getinfo(){
            const user = jwtDecode(cookie.getToken());
            this.permission = user.permission
            console.log(user);
      }
    },
    created(){
      this.getinfo()
    },
}
</script>

<style lang="less">
@navcolor: rgb(58, 58, 58);
@navfont: 13px;
@width: 1260px;
@hovercolor: #76d4ff;
* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
input {
  outline: none;
}
li {
  list-style: none;
}
header {
  width: 100%;
  background-color: white;
  .nav-top {
    // border-top: 1px solid grey;
    width: 100%;
    height: 40px;
    background-color: rgb(248, 248, 248);
    .nav-top-box {
      width: @width;
      height: 100%;
      margin: 0 auto;
      .locale {
        color: @navcolor;
        display: inline-block;
        height: 100%;
        padding-left: 20px;
        line-height: 40px;
        font-size: @navfont;
      }
      .change-locale {
        padding: 3px 5px;
        border: 1px solid rgb(197, 197, 197);
        color: @navcolor;
        display: inline-block;
        margin-left: 10px;
        font-size: @navfont;
        cursor: pointer;
        &:hover {
          color: @hovercolor;
        }
      }
      .near-citys {
        display: inline-block;
        div {
          display: inline-block;
          padding-left: 10px;
          padding-right: 10px;

          a {
            color: @navcolor;
            font-size: @navfont;
            &:hover {
              color: @hovercolor;
              cursor: pointer;
            }
          }
        }
      }
      .login {
        display: inline-block;
        a {
          font-size: 12px;
          &:nth-child(1) {
            color: @hovercolor;
            text-decoration: none;
          }
          &:nth-child(2) {
            margin-left: 5px;
            color: @navcolor;
            text-decoration: none;
            &:hover {
              color: @hovercolor;
              cursor: pointer;
            }
          }
        }
      }
      .nav-top-box-right {
        height: 100%;
        display: inline-block;
        float: right;
        ul {
          .nav-top-box-right-li {
            font-size: @navfont;
            box-sizing: border-box;
            line-height: 40px;
            padding: 0px 14px;
            border-left: 2px solid transparent;
            border-right: 2px solid transparent;
            display: inline-block;
            cursor: pointer;
            position: relative;
            a{
              color: black;
            }
            &:hover {
              background-color: rgb(255, 255, 255);
              border-left: 2px solid rgb(229, 229, 229);
              border-right: 2px solid rgb(229, 229, 229);
              color: @hovercolor;
            }
            .hidden {
              width: 100px;
              height: 0;
              visibility: hidden;
              overflow: hidden;
              position: absolute;
              border-left: 2px solid rgb(229, 229, 229);
              border-right: 2px solid rgb(229, 229, 229);
              top: 40px;
              left: -12px;
              background-color: aqua;
              transition: all 0.5s;
            }
            &:hover .hidden {
              z-index: 10;
              visibility: visible;
              height: 100px;
            }
          }
        }
      }
    }
  }
  .nav-bottom {
    width: 100%;
    height: 140px;
    box-shadow: 0 2px 27px 0 rgba(0, 0, 0, 0.1);
    .nav-bottom-box {
      width: @width;
      height: 100%;
      margin: 0 auto;
      position: relative;
      img {
        position: absolute;
        top: 25px;
        left: 0px;
        border-radius: 25px;
      }

      .search-input {
        width: 40%;
        border: 2px solid #e5e5e5;
        border-right: none;
        padding: 15px;
        font-size: 14px;
        background-image: none !important;
        border-radius: 5px 0px 0px 5px;
        position: absolute;
        top: 45px;
        left: 275px;
        transition: 0.5s;
        &:focus {
          border: 2px solid #52c8ff;
          border-right: none;
        }
      }
      .search-btn {
        border: 1px solid #52c8ff;
        border-left: none;
        background-color: #52c8ff;
        width: 90px;
        height: 50px;
        position: absolute;
        top: 45px;
        left: 785px;
        font-size: 18px;
        border-radius: 0px 5px 5px 0px;
        cursor: pointer;
        &:hover {
          background-color: #07affd;
        }
      }
    }
  }
}
</style>